<template>
    <div class="user-info">

        <div id="info-bg">
            <!--S头像-->
            <div id="avatar" :style="{'background-image':'url('+member.avatar+')'}">
            </div>
            <!--E头像-->

            <!--S昵称-->
            <p id="nickname">{{member.nickname}}</p>
            <!--E昵称-->
        </div>

        <div id="scan" @click="scan">
            <i class="iconfont icon-saoyisao"></i>
        </div>

        <!--S金额信息-->
        <div id="money">
            <dl>
                <dt>红包</dt>
                <dd>{{member.format_red_balance}}元</dd>
            </dl>

            <dl>
                <dt>余额</dt>
                <dd>{{member.format_balance}}元</dd>
            </dl>
        </div>
        <!--E金额信息-->

    </div>
</template>

<script>
import { mapState } from "vuex"
export default {
    name: "user-info",
    computed: {
        ...mapState({
            member: "member"
        })
    },
    methods: {
        // 扫一扫
        scan() {
            if(process.env.NODE_ENV === 'production') {
                this.$wx.scanQRCode({
                    needResult: 0,
                    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                })
            }
        }
    }
}
</script>

<style scoped lang="less">
    @import "@/theme.less";
    .user-info{
        position: relative;
        box-sizing: border-box;
        width: 375px;
        height: 180px;
        #info-bg{
            padding:10px 10px 0 10px;
            height: 140px;
            background:@main-color1;
        }
    }
    #scan{
        position: absolute;
        left:10px;
        top:10px;
        width: 30px;
        height: 30px;
        color: #fff;
        i{
            font-size: 25px;
        }
    }
    #avatar{
        width: 75px;
        height: 75px;
        margin: 0 auto;
        border-radius: 37.5px;
        background-size: cover;
        background-position: center center;
    }
    #nickname{
        text-align: center;
        margin-top: 10px;
        color: #fff;
    }
    #money{
        position: absolute;
        top: 110px;
        left:12.5px;
        margin: 10px auto 0 auto;
        width: 350px;
        height: 50px;
        color: #000;
        background: #fff;
        border-radius: 10px;
        padding:5px 0;
        dl{
            width: 50%;
            float: left;
            text-align: center;
            dt,dd{
                height: 25px;
                line-height: 25px;
            }
            dd{
                color: @font-color2;
            }
        }
    }
</style>
